<template>
        <h2>添加物资采购</h2>

        <el-form ref="ruleFormRef" style="max-width: 600px" :model="from" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="货物名称" prop="sPCargoName">
                        <el-input v-model="from.sPCargoName" />
                </el-form-item>
                <el-form-item label="类型" prop="sPTypeID">
                        <el-select v-model="from.sPTypeID" clearable placeholder="Select" style="width: 240px">
                                <el-option :value="0" label="请选择" />
                                <el-option v-for="item in TypeInfo" :key="item.typeid" :label="item.typeName"
                                        :value="item.typeid" />
                        </el-select>
                </el-form-item>
                <el-form-item label="材质" prop="sPMateriaLquality">
                        <el-select v-model="from.sPMateriaLquality" clearable placeholder="Select" style="width: 240px">
                                <el-option :value="0" label="请选择" />
                                <el-option v-for="item in MateriaLquality" :key="item.mmteriaLqualityID"
                                        :label="item.materiaLqualityName" :value="item.mmteriaLqualityID" />
                        </el-select>
                </el-form-item>
                <el-form-item label="规格" prop="sPGaugeLattice">
                        <el-input v-model="from.sPGaugeLattice" />
                </el-form-item>
                <el-form-item label="产地" prop="sPProvinceID">
                        <el-select v-model="from.sPNationID" clearable placeholder="Select" style="width: 240px"
                                @change="Provincelist()">
                                <el-option :value="0" label="请选择国家" />
                                <el-option v-for="item in Nation" :key="item.nationID" :label="item.nationName"
                                        :value="item.nationID" />
                        </el-select>
                        <el-select v-model="from.sPProvinceID" clearable placeholder="Select" style="width: 240px">
                                <el-option :value="0" label="请选择省" />
                                <el-option v-for="item in Provincel" :key="item.provinceID" :label="item.provinceName"
                                        :value="item.provinceID" />
                        </el-select>
                </el-form-item>
                <el-form-item label="数量" prop="sPQuantity">
                        <el-input-number v-model="from.sPQuantity" :min="1" @change="handleChange" />
                </el-form-item>
                <el-form-item label="期望交付日期" prop="sPExpectedDeliveryDate">
                        <el-date-picker v-model="from.sPExpectedDeliveryDate" type="date" placeholder="请选择日期"
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="用途描述" prop="sPPurposeDescription">
                        <el-input v-model="from.sPPurposeDescription" type="textarea" />
                </el-form-item>
                <el-form-item label="备注" prop="sPReserveNote">
                        <el-input v-model="from.sPReserveNote" type="textarea" />
                </el-form-item>
                <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                                提交审核
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        <el-button type="primary" @click="submitForm1(ruleFormRef)">
                                保存草稿
                        </el-button>
                </el-form-item>
        </el-form>

</template>

<script setup lang='ts'>

import { reactive, ref, onMounted, watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import { useRouter } from 'vue-router'
const router = useRouter()

//数据信息
const from = reactive({
        "sPCargoName": "",
        "sPTypeID": 0,
        "sPMateriaLquality": 0,
        "sPGaugeLattice": "",
        "sPNationID": 0,
        "sPProvinceID": 0,
        "sPQuantity": 0,
        "sPExpectedDeliveryDate": "",
        "sPPurposeDescription": "",
        "sPReserveNote": "",
        "sPApprovalStatus": 1,
})

//生命函数钩
onMounted(() => {
        //显示类  型
        TypeInfolist()
        //显示材 质
        MateriaLqualitylist();
        //显示产 地：国家
        Nationlist();
})
//显示类    型
const TypeInfo = ref([])
const TypeInfolist = () => {
        axios.get("MaterialRead/api/Public/TypeInfolist").then(res => {
                TypeInfo.value = res.data.data;
        }).catch(err => {
                console.log(err)
        })
}
//显示材 质
const MateriaLquality = ref([])
const MateriaLqualitylist = () => {
        axios.get("MaterialRead/api/Public/MateriaLqualitylist").then(res => {
                MateriaLquality.value = res.data.data;
        }).catch(err => {
                console.log(err)
        })
}
//显示产 地：国家
const Nation = ref([])
const Nationlist = () => {
        axios.get("MaterialRead/api/Public/Nationlist").then(res => {
                Nation.value = res.data.data;
        }).catch(err => {
                console.log(err)
        })
}
//显示产 地：省
const Provincel = ref([])
const Provincelist = () => {
        axios.get("MaterialRead/api/Public/Provincelist?nationID=" + from.sPNationID).then(res => {
                Provincel.value = res.data.data;
        }).catch(err => {
                console.log(err)
        })
}



//验证
const rules = reactive<FormRules>({
        sPCargoName: [
                { required: true, message: '货物名称不能为空', trigger: 'blur' },
        ], sPQuantity: [
                { required: true, message: '数量不能为空', trigger: 'blur' },
        ], sPPurposeDescription: [
                { required: true, message: '用途描述不能为空', trigger: 'blur' },
        ],
        sPTypeID: [
                {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                },
        ],
        sPMateriaLquality: [
                {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                },
        ], sPNationID: [
                {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                },
        ],
        sPProvinceID: [
                {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                },
        ], sPExpectedDeliveryDate: [
                {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                },
        ],
})
//数值
const handleChange = (value: number) => {
        from.sPQuantity = value
        console.log(value)
}
//提交审核
const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
                if (valid) {
                        from.sPApprovalStatus = 10
                        console.log(from)
                        axios.post("materialwrite/api/SuppliesPurchasing/AddSuppliesPurchasing", from).then(res => {
                                if (res.data.code > 0) {
                                        ElMessage.success("提交成功")
                                        router.push("/PurchasingList")
                                } else {
                                        ElMessage.error("提交失败")
                                }
                        }).catch(err => {
                                console.log(err)
                        })

                } else {
                        console.log('error submit!', fields)
                }
        })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
}
//保存草稿
const submitForm1 = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
                if (valid) {
                        from.sPApprovalStatus = 1
                        console.log(from)
                        axios.post("materialwrite/api/SuppliesPurchasing/AddSuppliesPurchasing", from).then(res => {
                                if (res.data.code > 0) {
                                        ElMessage.success("保存成功")
                                        router.push("/PurchasingList")
                                } else {
                                        ElMessage.error("保存失败")
                                }
                        }).catch(err => {
                                console.log(err)
                        })

                } else {

                }
        })
}


</script>

<style></style>